<!-- 举报弹框 -->
<!-- 小瓜子 更新于2020/08/23 -->

<!-- 小瓜子 更新于2020/08/29 -->
<!-- 优化举报后的弹框 -->

<!-- 小瓜子 更新于2020/09/09 -->
<!-- 优化空白举报检测 -->
<template>
	<view class="uni-popup-report">
		<view class="close" @tap='confirm'>×</view>
		<text class="title">详细描述：</text>
		<textarea class="report_detail" v-model="commitForm.inputedReason" placeholder="请输入50字以内的举报原因详情描述" maxlength="50" />
		<text class="title">举报原因：</text>
		<view class="reasons">
			<view :class="item.active ? 'each_reason_active each_reason' : 'each_reason'" v-for="(item,index) in reasonsList" :key="index" @tap="selectReson(index)">
				{{item.text}}		
			</view>
		</view>
		<!-- 确认举报按钮 -->
		<button type="default" class="report" @tap="report">举报</button>
	</view>
</template>

<script>
	import { _ajax } from '../../../in-xupt-functions.js'
	export default {
		props: {
			reportedId: Number ,// 被举报的帖子id
			fromWitch: { // 标志是从哪唤起的举报弹窗
				type: Number,
				default: undefined
			}
		},
		data() {
			return {
				// 写死的举报原因
				reasonsList: [{
					text: "广告宣传",
					active: false
				},{
					text: "内容涉政",
					active: false
				},{
					text: "色情暴力",
					active: false
				},{
					text: "辱骂他人",
					active: false
				},{
					text: "煽动情绪",
					active: false
				},{
					text: "其他",
					active: false
				}],
				// 最终提交的表单
				commitForm: {
					choosenReason: [], // 用户选择的举报原因
					inputedReason: "" //  用户输入的举报原因
				},
				urls: ['/circle/','/comment/','/post/','/user/']
			};
		},
		inject: ['popup'], // popup组件中要求写的
		methods: {
			// 点击举报按钮时触发的函数，在确认举报后发送请求
			report: function () {
				let _this = this
				if (this.checkOut()){
					uni.showModal({
						cancelColor: "#F76B8A",
						confirmColor: "#F76B8A",
						confirmText: "确认举报",
						content: "确认举报？举报后将无法撤回！",
						success: function (btn) {
							
							// 点击确认举报
							if(btn.confirm) {
								_ajax({
									url: _this.urls[_this.fromWitch] + _this.reportedId + '/report',
									method: 'POST',
									data: {
										'detail': _this.commitForm.inputedReason,
										'reasons': _this.commitForm.choosenReason
									}
								})
								setTimeout(() =>{
									uni.showToast({
										title: '举报成功'
									})
									_this.popup.close() // 关闭举报弹出框
								},200)
							}
							if(btn.cancel) {
								return
							}
						}
					})
				}else {
					uni.showToast({
						icon: 'none',
						title: '请输入或选择举报原因'
					})
				}
				
			},
			checkOut: function () {
				if(this.commitForm.choosenReason.length != 0 || !/^\s*$/.test(this.commitForm.inputedReason)){
					return true
				}else {
					return false
				}
			},
			// 当点击选择或取消选择某向原因时触发
			selectReson: function (index) {
				// 判断当前项是否已经被选中
				if (this.reasonsList[index].active) {
					// 已经被选中却被点击则取消选中
					this.reasonsList[index].active = false
					// 由于加入的顺序不确定，故使用数组的filter方法，除去被点击的一项
					this.commitForm.choosenReason = this.commitForm.choosenReason.filter(item => {
						return item != this.reasonsList[index].text
					})
				} else {
					// 未被选中时，将当前项推入将要提交的表单的数组中
					this.reasonsList[index].active = true
					this.commitForm.choosenReason.push(this.reasonsList[index].text)
				}
			},
			confirm() {
				// 关闭弹窗
				this.popup.close()
			},
		}
	}
</script>

<style lang="less">
	.uni-popup-report {
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		width: 100%;
		height: 800rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		z-index: 100;
		.close {
			position: absolute;
			top: 0px;
			right: 10px;
			font-size: 24px;
		}
		.title {
			display: block;
			margin-bottom: 20rpx;
			font-weight: 800rpx;
			font-size: 32rpx;
		}
		.report_detail {
			width: 100%;
			height: 200rpx;
			color: @g-gray;
			font-size: 24rpx;
			background-color: @g-background;
			margin-bottom: 20rpx;
			border: 1px solid @gray-line;
			border-radius: 10rpx;
			padding: 5px;
			box-sizing: border-box;
		}
		.reasons {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			.each_reason {
				width: 30%;
				border: 1px solid @gray-line;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				margin-bottom: 30rpx;
			}
			.each_reason_active {
				background-color: @gray-line;
			}
		}
		.report {
			position: absolute;
			bottom: 20rpx;
			left: 20%;
			width: 450rpx;
			height: 88rpx;
			line-height: 80rpx;
			font-size: 16px;
			border: 2px solid @g-gray;
		}
	}
</style>
